<template>
	<div class="detail" style="padding: 10px 20px;"  v-if="biddingData">
		<div class="bread">
			<el-breadcrumb separator=">">
				<el-breadcrumb-item :to="`/index`">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="`/bid/list?category=${biddingData.category}`">更多列表</el-breadcrumb-item>
				<el-breadcrumb-item>详情页</el-breadcrumb-item>
			</el-breadcrumb>
   		 </div>
		 <el-card class="box-card">
			<div style="font-weight: 600; line-height: 2em; text-align: center;font-size: 30px;color:#008a17;" :style="{fontSize}"> {{ biddingData.bidTitle }}</div>
			<span style="display:flex;justify-content: right;">
				 <el-button type="success" size="mini" @click="handlePrint()">打印</el-button>
				 <el-button type="success" size="mini" @click="changeFont(40)">大</el-button>
				 <el-button type="success" size="mini" @click="changeFont(30)">中</el-button>
				 <el-button type="success" size="mini" @click="changeFont(20)">小</el-button>
			</span>
			 <div class="print-element" >
				
				<div style="line-height: 2em; text-align: center;">
					<span style="color: #333333; padding-right: 3em;font-size: 18px;">发布企业：<span style="color: #666666">{{ biddingData.bidPublisher }}</span></span>
					<span style="color: #333333; padding-right: 3em;font-size: 18px;">发布时间：<span style="color: #666666">{{ biddingData.bidPublishDatetime }}</span></span>
					<!-- <span style="color: #333333">浏览次数：<span style="color: #666666">{{ biddingData.viewCount ? biddingData.viewCount : 0 }}</span></span> -->
        
           
				</div>
         <el-divider style="width: 70%;left: 15%;"/>
				<div class="bidContent" style="line-height: 2em; width: max(70%, 540px); margin: auto; white-space: pre-line; text-align: left;" v-html="biddingData.bidContent"/>
			</div>
		 </el-card>
		 
	</div>
  <div class="footDiv pcshow">
      <div class="wal">
        <div class="link">
          <a href="/index.html">首页</a><span>|</span>
          <a href="">关于我们</a><span>|</span>
          <a href="">走进医药港</a><span>|</span>
          <a href="">品牌合作</a><span>|</span>
          <a href="">招商中心</a><span>|</span>
          <a href="">资讯中心</a><span>|</span>
          <a href="">加入我们</a><span>|</span>
        </div>
        <div class="msg">Copyright © www.gimp.net.cn All Rights Reserved <a href="http://beian.miit.gov.cn/"
            target="_blank"></a><br><a href="http://www.vancheer.com" target="_blank">Powered by
            vancheer</a></div>
      </div>
    </div>

</template>

<script>
import { getBidding, viewBidding } from '@/api/bid/bidding'

export default {
	name: 'detail',
	data() {
		return {
			biddingData: undefined,
			fontSize: '20px',
			line:""
		}
	},
	async mounted() {
		
		this.biddingData = (await getBidding(this.$route.query.id)).data
		console.log("biddingData",this.biddingData)
		if (this.biddingData) {
			// await viewBidding(this.biddingData.id)
			if(biddingData.category==1){
				this.line="新闻资讯列表页"
			}
			else {
				this.line="公告变更列表页"
			}
		}
	},
	methods: {
		handlePrint() {
			print()
		},
		changeFont(size) {
			this.fontSize = size + 'px'
		}
	}
}
</script>



<style lang="scss" scoped>
.pageToolb {
  display: block;
  position: absolute;
  top: 40px;
  right:20px;
  z-index: 100;
  align-items: center;
  background: rgb(66 66 66);
  color: white;
  border-radius: 25px;
  cursor: pointer;
  justify-content: center;
  font-size: 15px;

}
.pageToola{
  display: flex;
  position: absolute;
  
  top: 10px;
  left: 50%;
  z-index: 100;
  transform: translateX(-50%);
  align-items: center;
  background: rgb(66 66 66);
  color: white;
  border-radius: 19px;
  cursor: pointer;
  justify-content: center;
  font-size: 15px;
}

.pageToolItemb {
  display: block;
  padding: 10px 5px;
  cursor: pointer;
}

.pageToolItema{
  padding: 4px 10px;
  cursor: pointer;
}

.floating-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  justify-content: center;
  background-color: #007bff;
  color: white;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  padding-top: 2px;
  border-radius: 5px;
}

.menu {
  position: fixed;
  bottom: 70px;
  right: 70px;
  background-color: #f8f9fa;
  padding: 10px;
  border: 1px solid #ced4da;
  display: none;
}

.menu ul {
  list-style-type: none;
  padding: 0;
}

.menu li {
  cursor: pointer;
}

.lock-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/images/测试图片2_proc.jpg');
  background-color: black;
  color: white;
  z-index: 9999;
}

.mobileList {
  display: none;
}

.bread {
  display: flex;
  line-height: 20px;
  padding: 10px 20px 20px;
}

.computer::deep {
  font-size: 100px;
}

.box-card {
  .title {
      text-align: center;
      color: black;
      font-weight: 900;
      font-size: 23px;
  }

  span {
      display: inline-block;
      box-sizing: border-box;
      padding: 10px 30px;
  }

  .bigcontent {
      display: block;
      padding: 20px 0;
      text-align: left;
      text-indent: 2ch;
  }
}
.footDiv {
  padding-top: 90px;
  padding-bottom: 25px;
  // background: url(@/assets/images/foot.jpg) no-repeat bottom center;
  background-color: #001500;

  .wal {
    width: 1240px;
    margin: 0px auto;

    .link {
      text-align: center;
      font-size: 14px;
      color: #fff;
      padding-bottom: 25px;

      a {
        color: #fff;
      }

      span {
        padding: 0 20px;
      }
    }

    .msg {
      text-align: center;
      color: #5d6b7a;
      line-height: 2;
      margin-top: 25px;
    }
  }
}
@media screen and (max-width: 767px) { 
      .title {
          text-align: center;
          color: black;
          font-weight: 900;
          font-size: 23px;
      }

      .publish {
          padding: 10px 0 10px;
      }

      span {
          display: flex;
          box-sizing: border-box;
          justify-content: left;
          text-align: left;
          padding: 0;
      }

      .bigcontent {
          display: block;
          padding: 0 0;
          text-align: left;
          text-indent: 2ch;
      }
  }

  .mobileList {
      display: block;
  }

  .bidTable,
  .bidPagination {
      display: none;
  }

  .list {
      .breadcrumb {
          margin-left: 0;
      }

      .content {
          width: 100%;
          margin: 14px 0px 44px 0px;
          min-height: auto;
      }
  }


/* Your existing styling */
</style>